<template>
	<view>
		<!-- <u-swiper :indicator="true" indicatorMode="dot" @click="click_swiper"
		class="swiper" :list="cur.banner" height='684rpx' width='732rpx' :circular="true"></u-swiper> -->
		<u-swiper :indicator="true" indicatorMode="dot" @click="click_swiper"
		 :list="cur.banner" height='684rpx' width='100%' :circular="true" radius="0"></u-swiper>

		<u--image class="imgs" width="349rpx" height="138rpx"
			src="https://img.js.design/assets/img/67177568e0f24202bd053023.png"></u--image>
		<view class="from">
			
			<view class="left">
				<view class="u-demo-block__content" padding-top=" 30rpx">
					<u-row justify="space-between"
						customStyle="margin-top: 17.3rpx;margin-left:20.7rpx;margin-bottom: 33rpx;">
						<u-col span="4" style="text-align: center;">
							<view class="demo-layout bg-purple-light">姓名</view>
							<view class="demo-layout bg-purple-light">{{cur.name}}</view>
						</u-col>
						<u-col span="6" style="text-align: center;">
							<view class="demo-layout bg-purple">民族</view>
							<view class="demo-layout bg-purple">{{cur.nationality}}</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="right">
				<view class="u-demo-block__content">
					<u-row justify="space-between"
						customStyle="margin-top: 17.3rpx;margin-left:20.7rpx;margin-bottom: 33rpx;">
						<u-col span="5" style="text-align: center;">
							<view class="demo-layout bg-purple-light">性别</view>
							<view class="demo-layout bg-purple-light">
								<view v-if="cur.age==0">男</view>
								<view v-else-if="cur.age==1">女</view>
							</view>
						</u-col>
						<u-col span="5" style="text-align: center;">
							<view class="demo-layout bg-purple">享年</view>
							<view class="demo-layout bg-purple">{{cur.dieAge}}</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="left">
				<view class="u-demo-block__content">
					<u-row justify="space-between"
						customStyle="margin-top: 17.3rpx;margin-left:20.7rpx;margin-bottom: 33rpx;">
						<u-col span="10" style="text-align: center;">
							<view class="demo-layout bg-purple-light">出生日期</view>
							<view class="demo-layout bg-purple-light">{{cur.birthDate}}</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="right">
				<view class="u-demo-block__content">
					<u-row justify="space-between"
						customStyle="margin-top: 17.3rpx;margin-left:20.7rpx;margin-bottom: 33rpx;">
						<u-col span="10" style="text-align: center;">
							<view class="demo-layout bg-purple-light">仙逝日期</view>
							<view class="demo-layout bg-purple-light">{{cur. dieDate}}</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="buttom" v-if="cur.address.length<20" style="height: 160rpx;">
				<view class="u-demo-block__content">
					<u-row justify="space-between"
						customStyle="margin-top: 17.3rpx;margin-left:20.7rpx;margin-bottom: 33rpx;">
						<u-col span="12">
							<view class="demo-layout bg-purple-light">祖籍地址</view>
							<view class="demo-layout bg-purple-light">{{cur.address}}</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="buttom" v-else style="height: 200rpx;">
				<view class="u-demo-block__content">
					<u-row justify="space-between"
						customStyle="margin-top: 17.3rpx;margin-left:20.7rpx;margin-bottom: 33rpx;">
						<u-col span="12">
							<view class="demo-layout bg-purple-light">祖籍地址</view>
							<view class="demo-layout bg-purple-light">{{cur.address}}</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			cur: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {

			}
		},
		onLoad() {},
		methods: {
			click_swiper(item){
				uni.previewImage({
					urls:this.cur.banner,
					current:item,
					indicator:'default'
				})
			}
		}
	}
</script>

<style lang="scss">
	// .swiper {
	// 	margin-left: 36rpx;
	// 	margin-right: 36rpx;
	// }

	.imgs {
		margin-top: -2rpx;
		margin-left: 221rpx;
		margin-right: 221rpx;
	}

	.from {
		.left {
			float: left;
			border-radius: 10px;
			background:rgba(243, 243, 243, 1);
			margin-top: 20px;
			margin-left: 36rpx;
			width: 327rpx;
			height: 163rpx;
			line-height: 60rpx;
		}

		.right {
			float: left;
			border-radius: 10px;
			background: rgba(243, 243, 243, 1);
			margin-top: 20px;
			margin-left: 24rpx;
			margin-right: 36rpx;
			width: 327rpx;
			height: 163rpx;
			line-height: 60rpx;
		}

		.buttom {
			float: left;
			border-radius: 10px;
			background: rgba(243, 243, 243, 1);
			margin-top: 20px;
			margin-left: 36rpx;
			margin-right: 36rpx;
			width: 679rpx;
			
			line-height: 60rpx;
		}
	}
</style>